<template>
  <div class="list_content" >
    <div class="title">
      <img :src="yiyuan.h_cover" alt="" />
      <div class="headline">
        <p>{{yiyuan.h_name}}</p>
        <div class="card">
          <span><i class=""></i>{{yiyuan.h_order}}</span>
          <span>公立</span>
        </div>
        <div>
          <span>1000km</span>|
          <span>{{yiyuan.h_address}}</span>
        </div>
      </div>
    </div>
    <!-- <div class="list">
      <van-list>
        <van-cell v-for="item in list" :key="item">
          <template #title>
            <div class="a">
              <div>{{ item.title }}</div>
              <div class="price">
                ￥{{ item.price }} <i class="iconfont icon-xiayibu"></i>
              </div>
            </div>
          </template>
        </van-cell>
      </van-list>
    </div> -->
    <div class="more">
      <span>查看更多套餐</span>
      <i class="iconfont icon-xiayibu"></i>
    </div>
  </div>
</template>

<script setup lang="ts">
import {hospital} from '@/type/Location'

let props = defineProps<{yiyuan:hospital}>()

let list = [
  { title: "男-30岁以下-基础套餐", price: 632.4 },
  { title: "男-50岁以下-基础套餐", price: 632.4 },
];


</script>

<style lang='scss' scoped>
@import url("//at.alicdn.com/t/c/font_3903764_8kotvp32fp4.css");
* {
  font-size: 14px;
}

p,body {
  margin: 0;
}
.list_content{
  margin-bottom: 10px;
}
.title {
  display: flex;
  > img {
    width: 50px;
    height: 50px;
    margin-right: 10px;
    border-radius: 50%;
  }
  .headline{
    >p{
      font-size: 18px;
    }
    >.card{
      color: white;
      font-size: 12px;
      span{
        padding: 2px ;
        margin-right: 5px;
      }
      >span:nth-child(1){
        background: #d99f63;
      }
      >span:nth-child(2){
        background: #f8af5a;
      }
    }
  }
}
.a {
  display: flex;
  justify-content: space-between;
  .price {
    color: red;
    > i {
      color: #b5bdc7;
    }
  }
}
.more {
  line-height: 30px;
  text-align: center;
  color: #b5bdc7;
}
</style>